<template>
  <div class="course-section">
    <el-card>
      <div slot="header">
        <el-button @click="dialogFormVisible = true">添加阶段</el-button>
      </div>
      <el-tree v-loading="isLoading" draggable :data="sections" :props="defaultProps" @node-click="handleNodeClick"
        :allow-drop="handleAllowDrop"
        @node-drop="handleNodeDrop">
        <div class="inner" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
           <span v-if="data.sectionName" class="actions">
             <el-button>编辑</el-button>
             <el-button @click="handleEdit(data.id)">添加课时</el-button>
             <el-button>状态</el-button>
           </span>
           <span v-else class="lesson">
             <el-button>编辑</el-button>
             <el-button @click="$router.push({ name: 'course-video', params: { courseId }, query: { lessonId: data.id} })">上传视频</el-button>
             <el-button>状态</el-button>
           </span>
        </div>
      </el-tree>
    </el-card>
    <el-dialog title="章节信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="课程名称" :label-width="formLabelWidth" required>
          <el-input v-model="form.courseName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="章节名称" :label-width="formLabelWidth" required>
          <el-input v-model="form.sectionName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="章节描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="章节排序" :label-width="formLabelWidth">
          <el-input v-model="form.orderNum" autocomplete="off">
            <template slot="append">数字控制越大，数字越大越考后</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveSection">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="课时基本信息" :visible.sync="dialogFormVisibleLesson">
      <el-form :model="form1">
        <el-form-item label="课程名称" :label-width="formLabelWidth" required>
          <el-input  autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="章节名称" :label-width="formLabelWidth" required>
          <el-input  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="课时名称" :label-width="formLabelWidth">
          <el-input v-model="form1.theme" autocomplete="off"></el-input>
        </el-form-item>
         <el-form-item label="时长" :label-width="formLabelWidth">
          <el-input v-model="form1.duration" autocomplete="off">
            <template slot="append">分钟</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否开发试听" :label-width="formLabelWidth">
          <el-switch
            v-model="form1.isFree"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="章节排序" :label-width="formLabelWidth">
          <el-input v-model="form1.orderNum" autocomplete="off">
            <template slot="append">数字控制越大，数字越大越考后</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleLesson = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateLesson">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSectionAndLesson, saveOrUpdateSection, saveOrUpdateLesson } from '@/services/course-section'

export default {
  name: 'CourseSection',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  created () {
    this.loadSection()
  },
  data () {
    return {
      sections: [],
      defaultProps: {
        children: 'lessonDTOS',
        label (data) {
          // data是章节或课时的时候，label的属性名不同，需要检测后使用
          return data.sectionName || data.theme
        }
      },
      isLoading: false,
      dialogFormVisible: false,
      form: {
        courseId: this.courseId,
        courseName: '前端bug',
        sectionName: '',
        description: '',
        orderNum: 0
      },
      formLabelWidth: '120px',
      dialogFormVisibleLesson: false,
      form1: {
        courseId: this.courseId,
        sectionId: '',
        theme: '',
        duration: 0,
        isFree: true,
        orderNum: 0
      }
    }
  },
  methods: {
    async saveOrUpdateLesson () {
      const { data } = await saveOrUpdateLesson(this.form1)
      console.log(data)
      if (data.code === '000000') {
        this.dialogFormVisibleLesson = false
      }
    },
    handleEdit (id) {
      this.dialogFormVisibleLesson = true
      this.form1.sectionId = id
    },
    async handleSaveSection () {
      const { data } = await saveOrUpdateSection(this.form)
      if (data.code === '000000') {
        this.dialogFormVisible = false
      }
    },
    // 节点拖拽完成后调用的方法
    async handleNodeDrop (draggingNode, dropNode, type, event) {
      this.isLoading = true
      try {
        await Promise.all(dropNode.parent.childNodes.map((item, index) => {
          if (draggingNode.data.sectionId) {
            return saveOrUpdateLesson({
              id: item.data.id,
              orderNum: index
            })
          } else {
            return saveOrUpdateSection({
              id: item.data.id,
              orderNum: index
            })
          }
        }))
        this.$message.success('更新成功')
      } catch (err) {
        this.$message.error('更新失败')
      }
      this.isLoading = false
    },
    // 节点拖拽过程中
    handleAllowDrop (draggingNode, dropNode, type) {
      // 规则1:只能同级移动
      // 规则2:课时不能移动到其他章节
      if (type !== 'inner' && draggingNode.data.sectionId === dropNode.data.sectionId) {
        return true
      }
    },
    async loadSection () {
      const { data } = await getSectionAndLesson(this.courseId)
      if (data.code === '000000') {
        this.sections = data.data
      }
    },
    handleNodeClick (data) {
      console.log(data)
    }
  }
}
</script>

<style>
.inner {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}
.el-tree-node__content {
  height: auto;
}
</style>
